<template>
    <div class="container-card">
        <div class="title">
            操作日志
            <DialogForm
              :params="{ act: 'detail', id: filterParams.order_id, valueName: 'add_note' }"
              isDrawer
              path="order/order/src/EditRemark"
              title="添加日志"
              width="600px"
              @okCallback="loadFilter">
                <el-button bg class="buttonColor" size="small" text type="primary"> 添加日志 </el-button>
            </DialogForm>
        </div>
        <el-table v-loading="loading" :data="orderLog">
            <el-table-column label="操作者" prop="operator" width="120px"></el-table-column>
            <el-table-column label="操作时间" prop="log_time" width="160px"></el-table-column>
            <el-table-column label="备注" prop="description"></el-table-column>
        </el-table>
        <div class="pagination-con">
            <Pagination v-model:page="filterParams.page" v-model:size="logSize" :total="total" @callback="loadFilter" />
        </div>
    </div>
</template>
<script setup lang="ts">

import {DialogForm} from "@/components/dialog";
import {Pagination} from "@/components/list";
import {onMounted, reactive, ref} from "vue";
import {getOrderLogList} from "@/api/order/order";
import {message} from "ant-design-vue";
const props = defineProps({
    order_id: {
        type: Number,
        default: 0,
    }
});
const filterParams = reactive({
    page: 1,
    order_id: props.order_id,
    parent_order_id: 0,
});
const loading = ref<boolean>(true);
const logSize = ref(10);
const total = ref<number>(0);
const orderLog = ref<object[]>([]);
const loadFilter = async () => {
    try {
        loading.value = true
        const resLog = await getOrderLogList(filterParams);
        orderLog.value = resLog.filter_result;
        total.value = resLog.total;
    } catch (error: any) {
        message.error(error.message);
    } finally {
        loading.value = false
    }
};

onMounted(()=>{
    loadFilter();
})
</script>
<style scoped lang="less">
.container-card {
    border: 1px solid #ececec;
    /* 添加淡淡的边框 */
    box-shadow: 2px 2px 5px rgba(203, 193, 193, 0.2);
    border-radius: 2px;
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;

    .title {
        font-size: 16px;
        line-height: 25px;
        color: #323233;
        margin-bottom: 15px;
        font-weight: 700;
    }
}
</style>
